<!DOCTYPE html>
<html lang="en" id="g-html">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <style>
      #home-loading {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        z-index: 999999999;
        background-color: rgba(255, 255, 255, .7);
        transition: all 1s;
      }
      #home-loading .content {
        width: 200px;
        height: 100px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: -100px;
        /*background-color: #2f8bcd;*/
      }
      #home-loading .content .home-loading-item {
        /*width: 20px;*/
        /*height: 100%;*/
        /*background-image: linear-gradient(45deg, #DCBC6C 0%, #FAF2CA 55%, #ECDAA0 100%);*/
        transform: translateY(-500px);
        /*animation: homeLoading 3s 1 ease;*/
        animation: homeLoading 2s infinite ease;
        text-align: center;
        font-size: 30px;
        font-weight: 600;
        color: #F9DCAB;
        text-shadow: 2px 2px 1px #000000;
      }
      #home-loading .content .item-2 {
        animation-delay: .3s;
      }
      #home-loading .content .item-3 {
        animation-delay: .5s;
      }
      /*#home-loading .content .item-4 {*/
      /*  animation-delay: .8s;*/
      /*}*/
      /*#home-loading .content .item-5 {*/
      /*  animation-delay: 1.1s;*/
      /*}*/
      /*#home-loading .content .item-6 {*/
      /*  animation-delay: 1.4s;*/
      /*}*/
      @keyframes homeLoading {
        0% {transform: translateY(-500)}
        10% {transform: translateY(-400)}
        20% {transform: translateY(-300)}
        30% {transform: translateY(-200)}
        40% {transform: translateY(-100)}
        50% {transform: translateY(0)}
        52% {transform: translateY(0)}
        54% {transform: translateY(0)}
        56% {transform: translateY(0)}
        58% {transform: translateY(0)}
        60% {transform: translateY(0)}
        62% {transform: translateY(0)}
        64% {transform: translateY(0)}
        66% {transform: translateY(0)}
        68% {transform: translateY(0)}
        70% {transform: translateY(-200)}
        80% {transform: translateY(-300)}
        90% {transform: translateY(-400)}
        100% {transform: translateY(-500)}
      }
    </style>
    <!-- 首屏渲染动画 -->
    <div id="home-loading">
      <div class="content">
        <div class="home-loading-item item-1">M</div>
        <div class="home-loading-item item-2">I</div>
        <div class="home-loading-item item-3">U</div>
<!--        <div class="home-loading-item item-4"></div>-->
<!--        <div class="home-loading-item item-5"></div>-->
<!--        <div class="home-loading-item item-6"></div>-->
      </div>
    </div>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_531282_uzstp15bcbl.css">
    <title>MIU 俱乐部</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but miu-club doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script>
    setTimeout(function () {
      document.getElementById('home-loading').style.backgroundColor = 'rgba(255, 255, 255, 0)';
      setTimeout(function () {
        document.getElementById('home-loading').style.display = 'none';
      }, 100)
    }, 1000)
  </script>
</html>
